<template>
  <view class="myaddress">
    <!-- 按钮结构 -->
    <view class="btnbox" v-if="JSON.stringify(address) === '{}'"><button type="primary" size="mini" @click="getAddress">请选择收货地址 +</button></view>
    <!-- 地址结构 -->
    <view class="infoBox" v-else @click="getAddress">
      <view class="row1">
        <view class="row1-left">收货人：{{ address.userName }}</view>
        <view class="row1-right">
          电话：{{ address.telNumber }}
          <uni-icons type="forward" size="20"></uni-icons>
        </view>
      </view>
      <view class="row2">收货地址：{{ fullAddress }}</view>
    </view>
    <image class="footImg" src="../../static/images/cart_border@2x.png" mode=""></image>
  </view>
</template>

<script>
import { mapMutations, mapState, mapGetters } from 'vuex';
export default {
  data() {
    return {
    };
  },
  methods: {
    ...mapMutations('user', ['setAddress']),
    async getAddress() {
      const [err, addressObj] = await uni.chooseAddress();
      console.log(addressObj);
      if (!err) {
        // this.address=addressObj
        // 将获取的数据保存到vue中
        this.setAddress(addressObj);
      }
    }
  },
  // 用来获取详细地址
  computed: {
    ...mapGetters('user', ['fullAddress']),
    ...mapState('user', ['address'])
  }
};
</script>

<style lang="scss">
.myaddress {
  .btnbox {
    text-align: center;
    padding: 30px 0;
  }

  .infoBox {
    font-size: 14px;
    padding: 10px;

    .row1 {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
      .row1-left {
      }
      .row1-right {
      }
    }
    .row2 {
      padding-bottom: 20px;
    }
  }

  .footImg {
    display: block;
    width: 100%;
    height: 5px;
  }
}
</style>
